웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 랜덤 색상을 선택하는 방법을 알아봅니다. 어떻게 하면 자바스크립트에서 간단하게 랜덤 색상을 얻을 수 있을까요?
# 자바스크립트 랜덤 색상 선택하기
랜덤 색상을 선택하는 함수를 만들어보겠습니다. 일단 웹에서 사용 가능한 타입 중 rgb 타입 값을 얻어보려고 합니다. rgb 값을 얻기 위해서는 0에서 255의 난수 중 하나를 얻으면 됩니다. rgb 색상값을 모두 얻은 후 반환하는 함수는 아래와 같이 동작하게 됩니다.
- r, g, b 값 각각 0 ~ 255 사이를 얻기
- alpha 사용시 a의 값 0에서 1사이 얻기
- rgba() 색상 값 반환
이제 위 단계별로 함수로 작성하면 아래와 같습니다.
! 자바스크립트 랜덤 색상 함수 코드 보기
아래의 작성 코드는 getRandomColor() 함수입니다. 매개변수로 알파값을 선택할 수 있으며 true를 전달할 경우 투명값이 적용된 rgba() 값을 리턴하게 됩니다.
getRandomColor = function(_isAlpha) {
let r = getRand(0, 255),
g = getRand(0, 255),
b = getRand(0, 255),
a = getRand(0, 10) / 10;
let rgb = _isAlpha ? 'rgba' : 'rgb';
rgb += '(' + r + ',' + g + ',' + b;
rgb += _isAlpha ? ',' + a + ')' : ')';
return rgb;
// Return random number from in to max
function getRand(min, max) {
if (min >= max) return false;
return ~~(Math.random() * (max - min + 1)) + min;
};
};
let r = getRand(0, 255),
g = getRand(0, 255),
b = getRand(0, 255),
a = getRand(0, 10) / 10;
let rgb = _isAlpha ? 'rgba' : 'rgb';
rgb += '(' + r + ',' + g + ',' + b;
rgb += _isAlpha ? ',' + a + ')' : ')';
return rgb;
// Return random number from in to max
function getRand(min, max) {
if (min >= max) return false;
return ~~(Math.random() * (max - min + 1)) + min;
};
};
이제 위 함수를 실행해보도록 하겠습니다.
getRandomColor()
// rgb(245,191,155)
getRandomColor(true)
// rgba(199,30,21,0.8)
// rgb(245,191,155)
getRandomColor(true)
// rgba(199,30,21,0.8)
위와 같이 alpha값을 사용하는 경우 매개변수로 true를 사용하면 됩니다. rgba()의 값을 반환하여 투명한 색이 적용된 랜덤 색을 얻을 수 있습니다.
! 마치면서
위 코드를 작성할 때 처음에는 hex를 사용하려 했으나 숫자와 함께 a, b, c, d, e, f 영문값이 필요하여 rgb() 표기가 가장 간단하다고 판단, 반환하도록 하였습니다.
! 직접 랜덤 색상 얻기 구현해보기
아래의 버튼을 클릭하면 위 함수가 실행되면서 결과값을 입력폼에 출력과 동시에 색을 적용하게 됩니다. 직접 클릭 후 어떻게 나타나는지 확인해보세요. 위에는 alpha가 없는 rgb 값이며 아래는 alpha가 포함된 rgba 값을 반환합니다.
아래의 글도 찾고 계시지 않나요?
